<template>
  <div class="rule-box">
    <div v-if="$route.query.name" class="back-title">
      <i class="el-icon-arrow-left" @click="$router.go(-1)">返回</i>
    </div>
    <div class="hk-container app-container">
      <div class="screen-container">
        <!-- 搜索框 -->
        <search-form
          :data="queryParams"
          :field-list="filterInfo.fieldList"
          @handleSearch="handleQuery"
          @handleReset="resetQuery"
        />
      </div>
      <HkTable
        :loading="loading"
        :table-data="tableList"
        :table-columns="tableFieldList"
        :show-pag="true"
        :show-index="true"
        :query-params="queryParams"
        :total="total"
        :operate="true"
        table-height="100"
        @changePage="changePage"
      >
        <template #operate="scope">
          <el-button type="text" @click="handleDetail(scope.row)">查看</el-button>
        </template>
        <!-- <template #metricsStr="scope">
          <el-tooltip placement="bottom" effect="light">
            <div slot="content">
              <span
                v-for="(item, index) in scope.row.metricsStr"
                :key="index"
              >{{ item }}{{ scope.row.metricsStr.length > 1 ? ',' : '' }}</span>
            </div>
            <div>
              <span
                v-for="(item, index) in scope.row.metricsStr"
                :key="index"
              >{{ item }}{{ scope.row.metricsStr.length > 1 ? ',' : '' }}</span>
            </div>
          </el-tooltip>
        </template> -->
        <!-- <template #description="scope">
          <el-tooltip placement="bottom" effect="light">
            <div slot="content">
              {{ scope.row.description }}
            </div>
            <span class="tablelist-title">{{ scope.row.description }}</span>
          </el-tooltip>
        </template> -->
      </HkTable>
      <detailDialog ref="detailDialogRef" title="查看详情" @updateList="getList" />
    </div>
  </div>
</template>

<script>
import SearchForm from '@/components/HkSearchform'
import { pageList } from '@/api/icp/modelManagement'
import HkTable from '@/components/Hk-Table'
import detailDialog from './detail'

export default {
  components: { SearchForm, HkTable, detailDialog },
  data() {
    return {
      // 新增框是否 可见
      open: false,
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: '',
      // 查询参数
      queryParams: {
        size: 10,
        current: 1
      },
      // 查询
      filterInfo: {
        fieldList: [{ label: '关键字', type: 'input', field: 'name' }]
      },
      tableList: [],
      tableFieldList: [
        { label: '模型名称', param: 'modelName', width: 300 },
        { label: '描述', param: 'description' },
        { label: '关联指标', param: 'metricsStr' },
        { label: '命中次数', param: 'count', width: 100 },
        { label: '最后执行时间', param: 'latestLogTimeStr' }
      ]

    }
  },
  created() {
    this.getList()
  },

  methods: {
    /** 查询角色列表 */
    getList() {
      this.loading = true
      this.queryParams.scrollToTop = true
      pageList(this.queryParams).then((res) => {
        this.tableList = res.list
        this.total = res.total
        this.loading = false
        this.queryParams.scrollToTop = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery(value) {
      this.queryParams.current = 1
      this.queryParams.name = value.name
      this.getList()
    },
    /** 重置按钮*/
    resetQuery() {
      this.queryParams = {
        name: undefined,
        size: 10,
        current: 1
      }
      this.getList()
    },
    /** 分页*/
    changePage(value) {
      this.getList()
    },
    /** 查看模型详情*/
    handleDetail(param) {
      this.$refs.detailDialogRef.show(param.id)
    }
  }
}
</script>
<style lang="scss" scoped>
.hk-container {
  padding: 0 20px 20px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
::v-deep .el-table {
  margin-top: 0 !important;
}

// .app-container {
//   padding: 0;
// }

.iconi {
  width: 16px;
  height: 16px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  margin-right: 10px;
  line-height: 16px;
  color: white;

  &::before {
    font-size: 10px;
    font-weight: 600;
  }
}
.targetTable {
  flex: 1;
  // overflow: auto;
}
</style>
